<template>
  <footer class="footer">
    <router-link tag="figure" to="/" active-class="_figure" exact>
      <i class="iconfont icon-zixun"></i>
      <figcaption>咨询</figcaption>
    </router-link>
    <router-link tag="figure" to="/page2" active-class="_figure">
      <i class="iconfont icon-duiyou"></i>
      <figcaption>萌友</figcaption>
    </router-link>
    <router-link tag="figure" to="/page3" active-class="_figure">
      <i class="iconfont icon-dianzijingji"></i>
      <figcaption>电竞</figcaption>
    </router-link>
    <router-link tag="figure" to="/page4" active-class="_figure">
      <i class="iconfont icon-shangcheng"></i>
      <figcaption>商城</figcaption>
    </router-link>
    <router-link tag="figure" to="/page5" active-class="_figure">
      <i class="iconfont icon-icon_zhanji"></i>
      <figcaption>战绩</figcaption>
    </router-link>
  </footer>
</template>

<script>
export default {
  // data(){
  //   return{

  //   },
  // },
  methods:{
  }
}
</script>

<style scoped lang="less">
  .footer{
    z-index: 999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    display: flex;
    box-shadow: 0 -5px 5px #ccc;
    background: white;
    figure{
      flex: 1;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color:#999;
      i{
        font-size:20px;
      }
      img{
        width: 25px;
        height: 25px;
      }
      figcaption{
        font-size: 12px;
        line-height:20px;
      }
    }
    ._figure{
      color:#222;
    }
  }
  
</style>
